<template>
  <div class="outbound-view">
    <el-card>
      <div slot="header">
        <span>出库管理</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="showAddDialog">
          <i class="el-icon-plus"></i> 新增出库记录
        </el-button>
      </div>
      <!-- 查询区域 -->
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item label="提单号">
          <el-input v-model="queryForm.billId" placeholder="请输入提单号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <div v-if="currentOutBound">
        <el-descriptions title="出库信息" :column="2" border>
          <el-descriptions-item label="提单号">{{currentOutBound.bill_id}}</el-descriptions-item>
          <el-descriptions-item label="出库件数">{{currentOutBound.qte_out}}</el-descriptions-item>
          <el-descriptions-item label="出库吨数">{{currentOutBound.weight_out}}</el-descriptions-item>
          <el-descriptions-item label="开船日">{{currentOutBound.time_out}}</el-descriptions-item>
        </el-descriptions>

        <div style="margin-top: 20px;">
          <el-button type="primary" @click="showEditDialog">编辑</el-button>
          <el-button type="danger" @click="handleDelete">删除</el-button>
        </div>
      </div>

      <div v-else-if="!hasQueried" class="empty-state">
        <i class="el-icon-search"></i>
        <p>请输入提单号进行查询</p>
      </div>

      <div v-else class="empty-state">
        <i class="el-icon-warning"></i>
        <p>未找到相关出库信息</p>
      </div>
    </el-card>
    
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
      <el-form :model="outBoundForm" :rules="rules" ref="outBoundForm" label-width="100px">
        <el-form-item label="提单号" prop="bill_id">
          <el-input v-model="outBoundForm.bill_id" :disabled="isEdit"></el-input>
        </el-form-item>
        <el-form-item label="出库件数" prop="qte_out">
          <el-input-number v-model="outBoundForm.qte_out" :precision="2" :step="0.01" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="出库吨数" prop="weight_out">
          <el-input-number v-model="outBoundForm.weight_out" :precision="2" :step="0.01" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="开船日" prop="time_out">
          <el-date-picker
            v-model="outBoundForm.time_out"
            type="date"
            placeholder="选择开船日"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { outBoundAPI } from '@/api/api'
export default {
  name: "OutBoundView",
  data(){
    return{
      queryForm:{
        billId: ''
      },
      currentOutBound: null,
      hasQueried: false,
      dialogVisible: false,
      isEdit: false,
      outBoundForm:{
        bill_id: '',
        user_id: null,
        qte_out: null,
        weight_out: null,
        time_out: ''
      },
      rules:{
        bill_id:[
          {required: true, message: '请输入提单号', trigger: 'blur'}
        ],
        qte_out:[
          {required: true, message: '请输入出库件数', trigger: 'blur'}
        ],
        weight_out:[
          {required: true, message: '请输入出库吨数', trigger: 'blur'}
        ],
        time_out:[
          {required: true, message: '请选择开船日', trigger: 'change'}
        ]
      }
    }
  },
  computed:{
    dialogTitle(){
      return this.isEdit? '编辑出库记录' : '新增出库记录'
    }
  },
  methods:{
    async handleQuery(){
      if(!this.queryForm.billId){
        this.$message.warning('请输入提单号')
        return
      }
      try{
        const response = await outBoundAPI.select(this.queryForm.billId)
        if(response && response.code === 200 && response.data){
          this.currentOutBound = response.data
          this.hasQueried = true
          this.$message.success('查询成功')
        }
        else{
          this.currentOutBound = null
          this.hasQueried = true
          this.$message.warning('未找到相关出库信息')
        }
      }catch(error){
        console.error('查询失败:', error)
        this.currentOutBound = null
        this.hasQueried = true
        this.$message.error('查询失败')
      }
    },

    resetQuery(){
      this.queryForm.billId = ''
      this.currentOutBound = null
      this.hasQueried = false
    },

    showAddDialog(){
      this.isEdit = false
      let user = localStorage.getItem('user')
      let user_id = ''
      if (user) {
        try {
          user_id = JSON.parse(user).user_id
        } catch (e) {}
      }
      this.outBoundForm = {
        bill_id: '',
        user_id: user_id,
        qte_out: null,
        weight_out: null,
        time_out: ''
      }
      this.dialogVisible = true
    },

    showEditDialog(){
      this.isEdit = true
      this.outBoundForm = {...this.currentOutBound}
      this.dialogVisible = true
    },

    async handleSubmit(){
      this.$refs.outBoundForm.validate(async (valid) => {
        if(valid){
          try{
            if(this.isEdit){
              const response = await outBoundAPI.update(this.outBoundForm)
              if(response && response.code === 200){
                this.$message.success('更新成功')
                this.currentOutBound = response.data
              } else {
                this.$message.error('更新失败')
                return
              }
            }
            else{
              const response = await outBoundAPI.add(this.outBoundForm)
              if(response && response.code === 200){
                this.$message.success('添加成功')
                this.currentOutBound = response.data
                this.hasQueried = true
              } else {
                this.$message.error('添加失败')
                return
              }
            }
            this.dialogVisible = false
          }catch(error){
            console.error('操作失败:', error)
            this.$message.error(this.isEdit ? '更新失败' : '添加失败')
          }
        }
      })
    },
    
    async handleDelete(){
      this.$confirm('确认删除记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try{
          const response = await outBoundAPI.delete(this.currentOutBound.bill_id)
          if(response && response.code === 200){
            this.$message.success('删除成功')
            this.resetQuery()
          } else {
            this.$message.error('删除失败')
          }
        }catch(error){
          console.error('删除失败:', error)
          this.$message.error('删除失败')
        }
      })
    }
  }
}
</script>

<style scoped>
.outbound-view {
  padding: 20px;
}

.empty-state {
  text-align: center;
  padding: 40px;
  color: #909399;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-state p {
  margin: 0;
  font-size: 14px;
}
</style>